<template>
  <div class="container">
    <HeadTitle title="确认订单" />

    <div class="yh-layout-box">
      <div class="order-detail bg-white">
        <div class="order-head">
          <div class="order-msg">
            <div class="order-icon">
              <img src="@/assets/images/meal/pay-success.png">
            </div>
            <div class="order-tips">
              <p class="yh-text-color">订单提交成功，请尽快付款！</p>
              <p>请在<span class="yh-text-color">23:59:59</span>时内完成支付订单款项，过时订单将被自动取消</p>
            </div>
          </div>
          <div class="order-money">
            应付金额：{{ packageServiceActive.priceText }}
            <span class="retract cursor" @click="clickShowDetail()">
              收起详情
              <span class="triangle-up" v-if="!showDetail"></span>
              <span class="triangle-bottom" v-else></span>
            </span>
          </div>
        </div>

        <div class="order-table" v-if="showDetail">
          <div class="table-head">
            <div class="NO">订单编号</div>
            <div class="goodsName">商品名称</div>
            <div class="count">数量</div>
            <div class="amount">金额</div>
          </div>
          <div class="table-row">
            <div class="NO">83961442107</div>
            <div class="goodsName">
              {{ packageServiceActive.name }}
            </div>
            <div class="count">
              1
            </div>
            <div class="amount">
              {{ packageServiceActive.priceText }}
            </div>
          </div>
        </div>
      </div>

      <div class="order-pay bg-white">
        <div class="pay-head over">
          <div class="pay-money fl">
            应付金额：<span class="font-red">{{ packageServiceActive.priceText }} </span>
          </div>
          <div class="pay-more fr yh-text-color">
            查看我的订单 <span>> </span>
          </div>
        </div>
        <div class="pay-type mt-30">
          <ul>
            <li v-for="(i, index) in payType" @click="clickPayType(index)" :class="payTypeActive == index?'cursor active':'cursor'">
              <img :src="i.image">
            </li>
          </ul>
        </div>
        <div class="btn-submit mt-40 cursor" @click="clickPay()">
          立即支付
        </div>
      </div>
    </div>
    <Footbar />
  </div>
</template>
<script>
import HeadTitle from '@/components/Layouts/HeadTitle'
import Footbar from '@/components/Layouts/Footbar'
import { orderPayBuild, getNewsList, orderPayCreate } from '@/api/meal'
import packageService from '@/utils/packageService'

export default {
  name: 'MealCashier',
  components: {
    HeadTitle,
    Footbar,
  },
  data() {
    return {
      payType: [{
        type: 'alipay',
        image: require('@/assets/images/meal/pay-ali.png'),
      },{
        type: 'wxpay',
        image: require('@/assets/images/meal/pay-wechat.png'),
      }],
      payTypeActive: 0,
      showDetail: true,
      packageServiceActive: null,
      packageServiceId: this.getUrlParams('packageServiceId'),
      factoryId: this.getUrlParams('factoryId'),
      orderInfo: null,
    }
  },
  created() {
    getNewsList({page: 1, size: 10}).then(res=>{
      console.log(res)
    })
    for (var index in packageService) {
      if(packageService[index].type == this.packageServiceId){
        this.packageServiceActive = packageService[index]
      }
    }
    // this.orderPayCreate();
  },
  methods: {
    // 切换支付类型
    clickPayType(index) {
      this.payTypeActive = index;
    },
    // 显示、隐藏订单
    clickShowDetail() {
      this.showDetail = !this.showDetail
    },

    // 创建套餐订单
    orderPayCreate() {
      orderPayCreate({
        source: '5',
        orderType: '1',
        payType: '1',
        factoryId: this.factoryId,
        packageServiceId: this.packageServiceActive.type,
        serviceContent: this.packageServiceActive.name,
        serviceYears: this.packageServiceActive.timeText,
        serviceAmount: this.packageServiceActive.price,
        quantity: 1,
      }).then(res=> {
        this.orderInfo = res.data.data;
      })
    },
    // 点击支付
    clickPay() {
      orderPayBuild({
        "type":"order",
      	"tradeType":"NATIVE",
      	"orderNo": this.orderInfo.comboOrderNo,
      	"payType": this.payTypeActive == 0?'alipay':'wxpay'
      }).then(res=>{

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail{
  padding: 20px;
  margin-top: 30px;

  .order-head{
    border-bottom: 1px solid #EEEEEE;
    overflow: hidden;
    padding-bottom: 14px;
  }
  .order-msg{
    float: left;
    overflow: hidden;
    .order-icon{
      float: left;
      img{
        padding-top: 12px;
        vertical-align: middle;
      }
    }
    .order-tips{
      float: left;
      margin-left: 10px;
    }
  }
  .order-money{
    float: right;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    .retract{
      margin-top: 30px;
      position: absolute;
      right: 0;
      font-size: 14px;
      color: #888888;
      font-weight: 100;
      padding: 8px 12px;
      background: #EEEEEE
    }
  }
  .order-table{
    margin-top: 30px;
    .table-head ,.table-row{
      overflow: hidden;
      margin-top: 10px;
      > div{
        float: left;
        text-align: center;
        padding: 18px 0;
      }
    }
    .table-head{
      background-color: #eee;
      border: 1px solid #DDDDDD;
      color: #888888;
    }
    .table-row{
      color: #666666;
    }
    .NO{
      width: 20%;
    }
    .goodsName{
      width: 40%;
    }
    .count{
      width: 15%;
    }
    .amount{
      width: 25%;
    }
  }
}
.order-pay{
  margin-top: 20px;
  padding: 30px;
  .pay-head{
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
  .pay-money{
    color: #000000;
    font-size: 16px;
    span{
      font-weight: 600;
    }
  }
  .pay-type{

    overflow: hidden;
    li{
      width: 218px;
      height: 68px;
      text-align: center;
      background: #F7F7F7;
      border: 1px solid #EEEEEE;
      border-radius: 4px;
      margin-right: 30px;
      float: left;
      img{
        margin-top: 17px;
      }
    }
    .active{
      border: 1px solid #255B8B;
      position: relative;
      &::after{
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 0;
        z-index: 2;
        background: url('../../assets/images/meal/meal-checked.png');
      }
    }
  }
}
.cursor{
  cursor: pointer;
}
</style>
